<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <style type="text/css">
        /*您可以将下列样式写入自己的样式表中*/
        .childBody {
            padding: 15px;
        }

        /*layui 元素样式改写*/
        .layui-btn-sm {
            line-height: normal;
            font-size: 12.5px;
        }

        .layui-table-view .layui-table-body {
            min-height: 236px;
        }

        /* 改变下拉框和文本框的行高 */
        .layui-table-cell, .layui-input, .layui-unselect, .layui-select {
            height: 30px;
            line-height: 30px;
            bottom: 0;
        }

        /*设置 layui 表格中单元格内容溢出可见样式*/
        .table-overlay .layui-table-view,
        .table-overlay .layui-table-box,
        .table-overlay .layui-table-body {
            overflow: visible;
        }

        .table-overlay .layui-table-cell {
            height: auto;
            overflow: visible;
        }

        /*文本对齐方式*/
        .text-center {
            text-align: center;
        }

        /**
        *遮罩层
         */
        .mask {
            position: fixed;
            top: 0px;
            height: 100%;
            width: 100%;
            filter: alpha(opacity=60);
            background-color: white;
            z-index: 10000000;
            left: 0px;
            opacity: 0.01;
            -moz-opacity: 0.01;
            display: none;
        }
    </style>

</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
     style="padding: 0px 10px 0 10px;">
    <form class="layui-form" action="" lay-filter="component-form-element">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-lg11">
                <table style="width: 100%;height: 50px;">
                    <tr style="color:#454c51;text-align: center;padding-bottom: 10px;;border-bottom:2px solid darkgray;">
                        <td style="width: 40%;">单据编号：<label id="orderNumber" style="text-decoration:underline;"></label>
                        </td>
                        <td style="width: 20%;"><label style="font-size:30px;">入库单</label></td>
                        <td style="width: 40%;">
                            <span style="width: 50%;display: block;float: right">
                                <div class="layui-form-item" style="margin-bottom: 0px;">
                                    <label class="layui-form-label">供应商：</label>
                                    <label class="layui-form-label" id="supplier_name"
                                           style="text-decoration:underline;"></label>
                                </div>
                            </span>
                            <span style="width: 50%;display: block;float: right">
                                <div class="layui-form-item" style="margin-bottom: 0px;">
                                    <label class="layui-form-label">进货单号：</label>
                                    <label class="layui-form-label" id="purchase_orderNumber"
                                           style="color: blue;text-decoration:underline;"></label>
                                </div>
                            </span>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="tableRes" class="table-overlay">
                <table id="dataTable" lay-filter="dataTable" class="layui-hide" style="margin-bottom: 0px;"></table>
                <input type="text" id="orderRemark" placeholder="请输入备注信息" autocomplete="off" class="layui-input"
                       style="margin-bottom: 15px;">
            </div>
        </div>
    </form>
</div>
</form>
</div>
<div id="mask" class="mask"></div>
<div id="action" class="text-center">
    <button type="button" name="btnSave" class="layui-btn" data-type="save">
        <i class="layui-icon layui-icon-ok-circle"></i>确认入库
    </button>
    <button type="reset" name="btnReset" class="layui-btn layui-btn-primary" onclick="closeThis()">取消
    </button>
</div>
<div class="layui-form-item layui-hide" id="action1">
    <input type="button" lay-submit lay-filter="entity-submit" name="btnSave" data-type="save" id="entity-submit"
           value="确认添加">
    <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit"
           value="确认编辑">
</div>
<script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script>
    /* 基础配置 */
    //订单完成后传递的json信息
    var jsonInfo = "";
    //订单号
    var orderNumber = "";
    //id
    var purchase_order_id = "";

    /**
     * 关闭该层
     */
    function closeThis() {
        //向后台发送取消占用该订单号
        $.ajax({
            url: '/depotInOrder/close',
            type: 'get',
            data: {"ordernumber": orderNumber},
            dataType: 'json',
            success: function (data) {
            }
        });
        var index = parent.layer.getFrameIndex(window.name);
        parent.layui.table.reload('entityTableNot');
        parent.layer.close(index);
    }

    /**
     * 显示遮罩层
     */
    function showMask() {
        $("#mask").css("height", $(document).height());
        $("#mask").css("width", $(document).width());
        $("#mask").show();
    }


    /*
    *隐藏遮罩层
    */
    function hideMask() {
        $("#mask").hide();
    }

    /**
     * 配置本页信息
     */
    window.viewObj = {
        tbData: [{
            pname: '',
            product_number: '',
            number: 0,
            unit: '',
            remark: ''
        }],
        typeData: [],
        renderSelectOptions: function (data, settings) {
            settings = settings || {};
            var valueField = settings.valueField || 'value',
                textField = settings.textField || 'text',
                selectedValue = settings.selectedValue || "";
            var html = [];
            for (var i = 0, item; i < data.length; i++) {
                item = data[i];
                html.push('<option value="');
                html.push(item[valueField]);
                html.push('"');
                if (selectedValue && item[valueField] == selectedValue) {
                    html.push(' selected="selected"');
                }
                html.push('>');
                html.push(item[textField]);
                html.push('</option>');
            }
            return html.join('');
        }
    };


    /**
     * 判断本页状态
     */
    if (parent.entityType == "toDetails") {
        $("button[name='btnSave']").remove();
        $("button[name='btnReset']").remove();
        $.ajax({
            url: parent.detailsYesURL,
            type: 'get',
            data: {"id": parent.entityId},
            dataType: 'json',
            async: false,//设置阻断
            success: function (data) {
                // console.log(data);
                $("#orderNumber").html(data.order.ordernumber);
                $("#purchase_orderNumber").html(data.order.pordernumber);
                $("#orderRemark").val(data.order.remark);
                $("#supplier_name").html(data.order.spname);
                viewObj.tbData = data.data;
            },
            error: function () {
                parent.layer.alert("信息获取失败！");
                return;
            }
        });
    } else {
        //下拉框初始化
        $.ajax({
            url: '/depotInOrder/toAdd',
            type: 'get',
            dataType: 'json',
            async: false,//设置阻断
            data: {"id": parent.entityId, "type": parent.entityType == "toDetail" ? "false" : "true"},
            success: function (data) {
                console.log(data);
                purchase_order_id = data.order.id;
                orderNumber = data.orderNumber;
                $("#orderNumber").html(data.orderNumber);
                $("#supplier_name").html(data.order.spname);
                $("#purchase_orderNumber").html(data.order.ordernumber);
                viewObj.tbData = data.details;
                //如果是未入库的查看则调用已入库的查看
                if ("toDetail" == parent.entityType) {
                    $("button[name='btnSave']").remove();
                    $("button[name='btnReset']").remove();
                    parent.entityType = "toDetails";
                }
            },
            error: function () {
                parent.layer.alert("信息获取失败！");
                return;
            }
        });
    }
</script>
<script>
    /** layui配置 */
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table;
        //数据表格实例化
        var tbWidth = $("#toolbar").width() - 5;
        var layTableId = "dataTable";
        var tableIns = table.render({
            elem: '#dataTable',
            id: layTableId,
            data: viewObj.tbData,
            // width: tbWidth,
            cellMinWidth: 60,
            totalRow: true,
            loading: true,
            even: false,
            cols: [[
                {title: '序号', type: 'numbers', totalRowText: '合计', unresize: true},
                {field: 'pname', title: '商品名称'},
                {field: 'product_id', hide: true, title: '商品id'},
                {field: 'product_number', title: '商品编号'},
                {field: 'number', event: "changeNumber", title: '数量', totalRow: true, edit: 'number'},
                {field: 'unit', width: 80, unresize: true, title: '单位'},
                {field: 'remark', title: '备注', edit: 'text'}
            ]],
            done: function (res, curr, count) {
                viewObj.tbData = res.data;
                //如果是查询则增加遮罩层
                if (parent.entityType == "toDetails") {
                    $("[data-field='tempId']").css('display', 'none');
                    showMask();
                }
            }
        });

        //用于存储事件的类型
        var activeType = "";
        //定义事件集合
        var active = {
            //保存
            save: function () {
                var oldData = table.cache[layTableId];
                jsonInfo = {
                    "orderNumber": orderNumber,
                    "purchase_order_id": purchase_order_id,
                    "remark": $("#orderRemark").val(),
                    "table": table.cache[layTableId]
                };
                console.log(jsonInfo);
                // --- 向后台传输数据 --
                var index = parent.layer.getFrameIndex(window.name);
                var i = parent.layer.load();
                $.ajax({
                    url: parent.entityURL,
                    type: 'post',
                    data: JSON.stringify(jsonInfo),
                    contentType: "application/json;charset=UTF-8",
                    dataType: 'json',
                    async: false,//设置阻断
                    success: function (data) {
                        parent.layer.close(i);//关闭加载窗
                        parent.layer.msg(data.msg, {icon: data.icon, zIndex: layer.zIndex + 100});
                    }
                });
                parent.layui.table.reload('entityTableNot'); //重载表格
                parent.layer.close(index); //关闭该窗口
            }
        };
        //激活事件
        var activeByType = function (type, arg) {
            if (arguments.length === 2) {
                active[type] ? active[type].call(this, arg) : '';
            } else {
                active[type] ? active[type].call(this) : '';
            }
        };
        //注册按钮事件
        $('.layui-btn[data-type]').on('click', function () {
            var type = $(this).data('type');
            activeByType(type);
        });

        //修改单元格内容
        table.on('edit(dataTable)', function (obj) {
            //获取一行数据
            $.extend(obj.data, {
                'pname': obj.data.pname,
                'product_number': obj.data.product_number,
                'number': obj.data.number,
                'unit': obj.data.unit,
                'remark': obj.data.remark
            });
            activeByType('updateRow', obj.data);
            tableIns.reload();
        });
    })
</script>
</body>
</html>